<style>
    .el-select {
        display: block;
    }
</style>
<div id="userPage" class="pd14 vany_authority">
    <div class="vany_treeTable pd14" id="jurisdiction">
        <!--面包屑-->
        <div class="pb10" id="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">系统综合管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户信息</el-breadcrumb-item>
            </el-breadcrumb>
            <i-favorite></i-favorite>
        </div>
        <div>
            <div class="pd14">
                <el-form ref="page.condition" v-model="page.condition" :inline="true" label-width="120px">
                    <el-row :gutter="8">
                        <el-col :span="6">
                            <el-form-item th:label="#{user.sesa-id}+'：'">
                                <el-input v-model="page.condition.sesaId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item th:label="#{user.role}+'：'">
                                <el-select v-model="page.condition.roleId" placeholder="请选择角色">
                                    <el-option
                                            v-for="role in roles"
                                            :key="role.id"
                                            :label="role.roleName"
                                            :value="role.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item th:label="#{user.chinese-name}+'：'">
                                <el-input v-model="page.condition.chineseName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item th:label="#{user.business-title}+'：'">
                                <el-select v-model="page.condition.businessTitleValue" clearable placeholder="请选择">
                                    <el-option
                                            v-for="businessTitle in dictionaries.businessTitles"
                                            :key="businessTitle.value"
                                            :label="businessTitle.text"
                                            :value="businessTitle.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="8">
                        <el-col :span="6">
                            <el-form-item th:label="#{user.employee-status}+'：'">
                                <el-select v-model="page.condition.employeeStatus" clearable placeholder="请选择">
                                    <el-option
                                            v-for="employeeStatus in dictionaries.employeeStatuses"
                                            :key="employeeStatus.value"
                                            :label="employeeStatus.text"
                                            :value="employeeStatus.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item th:label="#{common.is-enable}+'：'">
                                <el-select v-model="page.condition.isEnable" placeholder="">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" :offset="8">
                            <el-form-item>
                                <el-button type="primary" @click="search" th:text="#{common.search}">Search</el-button>
                                <el-button @click="exportUser" th:text="#{common.export}">Export</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <el-table ref="table" :data="page.records" highlight-current-row :height="tableHeight" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable"></el-table-column>
                <el-table-column prop="sapStaffNo" show-overflow-tooltip th:label="#{user.sap-staff-no}"></el-table-column>
                <el-table-column show-overflow-tooltip th:label="#{user.sesa-id}">
                    <template scope="scope">
                        <a href="javascript:void(0)" @click="showDetail(scope.row)">{{scope.row.sesaId}}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="chineseName" show-overflow-tooltip th:label="#{user.chinese-name}"></el-table-column>
                <el-table-column prop="englishName" show-overflow-tooltip th:label="#{user.english-name}"></el-table-column>
                <el-table-column prop="email" show-overflow-tooltip th:label="#{user.email}"></el-table-column>
                <el-table-column prop="businessTitleText" show-overflow-tooltip th:label="#{user.business-title}"></el-table-column>
                <el-table-column prop="costCenter" show-overflow-tooltip th:label="#{user.cost-center}"></el-table-column>
                <el-table-column prop="employeeStatusText" show-overflow-tooltip th:label="#{user.employee-status}"></el-table-column>
                <el-table-column prop="roleNames" show-overflow-tooltip th:label="#{user.role}" :formatter="roleNameFormatter"></el-table-column>
                <el-table-column column-key="isEnable" show-overflow-tooltip th:label="#{common.is-enable}">
                    <template scope="scope">
                        <div v-if="scope.row.isEnable === '1'">
                            启用
                        </div>
                        <div v-else>
                            <div style="color:#ff0000;">禁用</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30]"
                    :page-size="page.size"
                    :total="page.total"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>

            <el-dialog title="用户信息" v-model="userDialogVisible">
                <el-form v-model="form" :label-width="formLabelWidth">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.sap-staff-no}">
                                <el-input v-model="form.sapStaffNo" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.sesa-id}">
                                <el-input v-model="form.sesaId" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.employee-id}">
                                <el-input v-model="form.employeeId" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.chinese-name}">
                                <el-input v-model="form.chineseName" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.first-name}">
                                <el-input v-model="form.firstName" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.last-name}">
                                <el-input v-model="form.lastName" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.english-name}">
                                <el-input v-model="form.englishName" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.email}">
                                <el-input v-model="form.email" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.business-unit}">
                                <el-input v-model="form.businessUnit" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.convert-company}">
                                <el-input v-model="form.convertCompany" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.department}">
                                <el-input v-model="form.department" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.business-title}">
                                <el-input v-model="form.businessTitleText" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.job-code}">
                                <el-input v-model="form.jobCode" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.supervisor-sesa-id}">
                                <el-input v-model="form.supervisorSesaId" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.bu-hr-sesa-id}">
                                <el-input v-model="form.buHrSesaId" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.cost-center}">
                                <el-input v-model="form.costCenter" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{user.employee-status}">
                                <el-input v-model="form.employeeStatusText" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item th:label="#{common.is-enable}">
                                <template>
                                    <el-radio class="radio" v-model="form.isEnable" label="1" th:text="#{common.true}">是</el-radio>
                                    <el-radio class="radio" v-model="form.isEnable" label="0" th:text="#{common.false}">否</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item th:label="#{user.role}">
                                <template>
                                    <el-select v-model="form.roleIds" multiple placeholder="请选择">
                                        <el-option
                                                v-for="role in roles"
                                                :key="role.id"
                                                :label="role.roleName"
                                                :value="role.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="userDialogVisible = false" th:text="#{user.reset-password}">重置密码</el-button>
                    <el-button type="primary" @click="userDialogVisible = false" th:text="#{common.ok}">确 定</el-button>
                    <el-button @click="userDialogVisible = false" th:text="#{common.cancel}">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
<!-- ******************************************************************************角色有关结束****************************************************************************** -->
<script type="text/javascript" src="templates/sys/js/user.js"></script>
